<div class="heading-box">
	<h2>FAQ</h2>
	<div class="text-box">
		<p>Frequnetly Asked Question</p>
	</div>
</div>
<div class="breadcrumbs-holder">
	<ul class="breadcrumbs">
		<li><a href="<?php echo $this->baseUrl("/");?>">Home</a></li>
		<li><span>Faq</span></li>
	</ul>
	<div class="breadcrumbs-r"></div>
</div>
<div id="twocolumns">
	<div id="content">
		<div id="faqSection"></div>
	</div>
	<div id="sidebar">
		<?php  echo $this->callElement("default/common/right"); ?>
	</div>
</div>
<style type="text/css">

#faqSection{
	padding:20px 90px 60px 60px;
	text-shadow:1px 1px 0 white;
}

/* The expand / collapse button */

a.button{
	background:url('img/buttons.png') no-repeat;
	width:80px;
	height:38px;
	position:absolute;
	right:50px;
	top:45px;
	text-indent:-9999px;
	overflow:hidden;
	border:none !important;
}

a.button.expand:hover{ background-position:0 -38px;}
a.button.collapse{ background-position:0 -76px;}
a.button.collapse:hover{ background-position:0 bottom;}

/* Definition Lists */

dt{
	font-size:25px;
	margin-top:30px;
	padding-left:25px;
	position:relative;
	cursor:pointer;
}



dt .icon{
	background:url('img/bullets.png') no-repeat;
	height:12px;
	left:0;
	position:absolute;
	top:11px;
	width:12px;
}

dt.opened .icon{ background-position:left bottom;}

dd{
	font-size:14px;
	line-height:1.5;
	padding:20px 0 0 25px;
	width:580px;
	display:none;
}

</style>
<script type="text/javascript">
jQuery(document).ready(function(){

	// The published URL of your Google Docs spreadsheet as CSV:
	var csvURL = 'https://spreadsheets.google.com/pub?hl=en&hl=en&key=0AhTM3P2XxvOMdDBqMFlkNEN5SHh3a1VJaU1vNUxwbkE&output=csv';

	// The YQL address:
	var yqlURL =	"http://query.yahooapis.com/v1/public/yql?q="+
					"select%20*%20from%20csv%20where%20url%3D'"+encodeURIComponent(csvURL)+
					"'%20and%20columns%3D'question%2Canswer'&format=json&callback=?";

	jQuery.getJSON(yqlURL,function(msg){

		var dl = jQuery('<dl>');

		// Looping through all the entries in the CSV file:
		jQuery.each(msg.query.results.row,function(){

			// Sometimes the entries are surrounded by double quotes. This is why
			// we strip them first with the replace method:

			var answer = this.answer.replace(/""/g,'"').replace(/^"|"$/g,'');
			var question = this.question.replace(/""/g,'"').replace(/^"|"$/g,'');

			// Formatting the FAQ as a definition list: dt for the question
			// and a dd for the answer.

			dl.append('<dt><span class="icon"></span>'+question+'</dt><dd>'+answer+'</dd>');
		});


		// Appending the definition list:
		jQuery('#faqSection').append(dl);

		jQuery('dt').live('click',function(){
			var dd = jQuery(this).next();

			// If the title is clicked and the dd is not currently animated,
			// start an animation with the slideToggle() method.

			if(!dd.is(':animated')){
				dd.slideToggle();
				jQuery(this).toggleClass('opened');
			}

		});

		jQuery('a.button').click(function(){

			// To expand/collapse all of the FAQs simultaneously,
			// just trigger the click event on the DTs

			if(jQuery(this).hasClass('collapse')){
				jQuery('dt.opened').click();
			}
			else jQuery('dt:not(.opened)').click();

			jQuery(this).toggleClass('expand collapse');

			return false;
		});

	});
});

</script>